import { Iconify } from '@/components/icon';
import { useThemeToken } from '@/theme/hooks';

export function Conversion({ todayOrder }: { todayOrder: number }) {
  const { colorPrimaryActive, colorPrimaryBorder } = useThemeToken();
  return (
    <Basic
      percent={48}
      title={todayOrder.toString()}
      subtitle="今日总订单数"
      iconify="icon-park-solid:transaction-order"
      bg={colorPrimaryActive}
      strokeColor={colorPrimaryBorder}
    />
  );
}
export function Applications({ todayPayment }: { todayPayment: number }) {
  const { colorInfoActive, colorInfoBorder } = useThemeToken();
  return (
    <Basic
      percent={75}
      title={`${todayPayment}元`}
      subtitle="今日总金额"
      iconify="ri:money-cny-circle-fill"
      bg={colorInfoActive}
      strokeColor={colorInfoBorder}
    />
  );
}

type Props = {
  percent: number;
  title: string;
  subtitle: string;
  iconify: string;
  bg?: string;
  strokeColor?: string;
};
function Basic({ percent, title, subtitle, iconify, bg, strokeColor }: Props) {
  const { colorBgBase } = useThemeToken();
  return (
    <div
      className="relative flex items-center rounded-2xl p-6"
      style={{ background: bg, color: colorBgBase, height: '100%' }}
    >
      <div
        className="ml-4 flex "
        style={{ width: '100%', height: '50%', justifyContent: 'space-between' }}
      >
        <span className="font-bold" style={{ fontSize: 38, marginTop: -10, marginBottom: 10 }}>
          {title}
        </span>
        <span
          className="opacity-80"
          style={{ fontSize: 20, marginTop: 20, marginLeft: 30, marginRight: 90 }}
        >
          {subtitle}
        </span>
      </div>
      <div className="absolute right-0">
        <Iconify icon={iconify} style={{ opacity: 0.08 }} size={100} />
      </div>
    </div>
  );
}
